9

CommonsChunkPlugin, 顾名思义,是用来把公用模块打包到一起的插件,以减小打包后js文件的体积。

令人迷惑的minChunks

中文社区和官网都对此属性语焉不详。

首先,minChunks的Chunk是什么意思?

…… a separate file (known as a chunk).
意思是当entry属性的值为对象时,作为多个入口的文件们,每个都是一个chunk。

理解了chunk的定义,再来看看官网对minChunks的解释:

minChunks: number|Infinity|function(module, count) -> boolean,
// The minimum number of chunks which need to contain a module before it's moved into the commons chunk.
// The number must be greater than or equal 2 and lower than or equal to the number of chunks.
// Passing Infinity just creates the commons chunk, but moves no modules into it.
// By providing a function you can add custom logic. (Defaults to the number of chunks)

需要重点关注的额是minChunks的number值。
官网的解释我实在看不懂:在被放到共同chunks之前需要包含模块的chunks的最小数量。
这是什么鬼意思,有没有洋文好的大佬翻译一下?

minChunks:number

那么minChunks的值为number时,由什么效果呢?
经过我测试,发现minChunks是指某个模块最少被多少个入口文件依赖。
当大于等于minChunks设定的值时,该模块就会被打包到公用包中。
小于这个值时,该模块就会被和每个入口文件打包在一起。

比如,有八个入口文件,minChunks值为7,那么,就算某个模块被6个入口文件依赖了,这个模块也会被打包6次,每个依赖他的文件中都有一份相同的代码。

minChunks:Infinity

搞懂了minChunks的number属性,Infinity属性就很好理解了。也就是不会把任何依赖的模块提取出来打包公用。

minChunks默认值

当忽略此属性时,只有在被所有入口文件都依赖时,才会提取相应模块。

水平有限,说错了轻喷。


OLong
450 声望318 粉丝